<!DOCTYPE html>
<html lang="en" ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title>LazyLoad Module Demo</title>
        <script type="text/javascript" src="node_modules/angular/angular.js"></script>
        <script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
        <script type="text/javascript" src="node_modules/oclazyload/dist/ocLazyLoad.js"></script>
        <script type="text/javascript" src="src/lib/route.js"></script>
        <script type="text/javascript" src="src/js/app.js"></script>
        <script type="text/javascript" src="src/js/loading.js"></script>

        <style>
            div[ui-view] {
                position: relative;
                width: 90%;
                margin: 0 5%;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li ng-repeat="(name, route) in routes track by route.name" ng-include=" 'routeTpl' " loading="route.$$asyncPromise">
                </li>
            </ul>
        </nav>
        <hr>
        <p>
            {{routes}}
        </p>
        <div ui-view></div>
        <script id="routeTpl" type="text/ng-template">
            <button ui-sref="{{route.name}}">{{route.label}}</button>
            <ul ng-if="route.children">
                <li ng-repeat="(name, route) in route.children track by route.name" ng-include=" 'routeTpl' "></li>
            </ul>
        </script>
    </body>
</html>